<template>
  <div class="easy-container flex">
    <div class="cell">
      <router-link :to="curNote.author.path">
        <el-avatar :src="curNote.author.avatar" :size="40"/>
      </router-link>
    </div>
    <div class="cell flex-1" style="min-width: 0;">
      <p>
        <router-link :to="curNote.author.path" class="title link">
          {{ curNote.author.nickname }}
        </router-link>
        <span class="m-l-5 info-deep">{{ curNote.desc }}</span>
      </p>
      <template v-if="curNote.type === $C.notifications.type.comments">
        <router-link :to="curNote.notePath" target="_blank" @click.native="readNote">
          <ckeditor :initial-content="curNote.content" :readonly="true"/>
        </router-link>
        <p v-if="curNote.parentContent" class="info-quote no-warp-ellipsis-line2">
          {{ currentUser.nickname }}: {{ $va.plainText(curNote.parentContent) }}</p>
        <p v-else class="info-quote no-warp-ellipsis-line2">{{ curNote.root.title }}</p>
      </template>
      <template v-if="curNote.type === $C.notifications.type.votes">
        <router-link
          v-if="curNote.root.title"
          class="info-quote no-warp-ellipsis-line2 m-t-10"
          :to="curNote.root.path"
          @click.native="readNote"
        >
          {{ curNote.root.title }}
        </router-link>
        <router-link
          v-else
          :to="curNote.notePath"
          class="info-quote no-warp-ellipsis-line2 m-t-10"
          @click.native="readNote"
        >
          {{ currentUser.nickname }}: {{ $va.plainText(curNote.root.content) }}
        </router-link>
      </template>
      <template v-if="curNote.type === $C.notifications.type.at">
        <div class="m-t-8"></div>
        <router-link class="h4" :to="curNote.root.path" target="_blank" @click.native="readNote">
          【问题】{{ curNote.root.title }}
        </router-link>
      </template>
    </div>
    <div class="cell shrink-0 flex align-items-center">
      <el-button
        size="small"
        :type="curNote.read ? 'warning' : 'success'"
        @click="readNote"
        :loading="isLoading"
        >
        {{ curNote.read ? '标记为未读' : '标记为已读' }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'CommentsAndVotes', // 评论和点赞
  props: {
    note: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      curNote: JSON.parse(JSON.stringify(this.note)),
      isLoading: false, // 正在修改状态
    };
  },
  computed: {
    ...mapState(['currentUser']),
  },
  methods: {
    // 设置当前为已读
    readNote() {
      this.isLoading = true;
      this.$api.notifications.read({
        notesId: [this.curNote.id],
        read: !this.curNote.read,
      }).then(() => {
        this.$set(this.curNote, 'read', !this.curNote.read);
        this.$root.$emit('updateUnreadCount');
      }).catch(() => {})
        .then(() => { this.isLoading = false; });
    },
  },
};
</script>

<style></style>
